<template>
  <div class="public-home">
    <div class="edit-content">
      <h3>编辑内容</h3>
      <div class="edit-opration">
        <button type="button" class="btn obtain-content-btn" @click="getEditorData">获取内容</button>
        <button type="button" class="btn pre-content-btn" @click="preEditorData">浏览内容</button>
        <button type="button" class="btn save-draft-btn" @click="saveDraftData">保存草稿</button>
        <button type="button" class="btn commit-btn" @click="commitEditorData">提交内容</button>
      </div>
    </div>
    <div id="editor" class="editor-area"></div>

    <div class="get-detail-content" v-show="showPreArar">
      <textarea class="pre-area" name="" id="" cols="170" rows="20" readonly v-model="editorData"></textarea>
    </div>

    <div class="pre-detail-content" v-show="showPreArar">
      <div class="pre-top-bar">
        <h3>浏览内容</h3>
        <a href="javascript:;" @click="closePreContent">X</a>
      </div>
      <div class="pre-area" v-html="editorData"></div>
    </div>

    <div class="save-detail-content" v-show="showPreArar">
      <textarea  class="pre-area" name="" id="" cols="170" rows="20" readonly v-model="editorData"></textarea>
    </div>
      
  </div>
  
</template>

<script>

// 引入 wangEditor
import wangEditor from 'wangeditor'

export default {
  data() {
    return {
      editor: null,
      editorData: '',
      showPreArar: false
    }
  },
  mounted() {
    const editor = new wangEditor(`#editor`)

    //图片上传
    // 配置 server 接口地址
    editor.config.uploadImgServer = '/upload-img'
    //默认限制图片大小是 5M ，可以自己修改
    editor.config.uploadImgMaxSize = 2 * 1024 * 1024 // 2M
    editor.config.uploadImgMaxLength = 5 // 一次最多上传 5 个图片
    editor.config.uploadImgParams = {
      token: 'xxxxx',
      x: 100
    }
    editor.config.uploadFileName = 'your-custom-fileName'
    editor.config.uploadImgHeaders = {
      Accept: 'text/x-json',
      a: 100,
    }
    //跨域上传中如果需要传递 cookie 需设置 withCredentials 。
    editor.config.withCredentials = true
    //timeout 即上传接口等待的最大时间，默认是 10 秒钟，可以自己修改。
    editor.config.uploadImgTimeout = 5 * 1000
    //使用回调函数，对上传图片的不同阶段，做相应处理。
    editor.config.uploadImgHooks = {
      // 上传图片之前
      before: function(xhr) {
        console.log(xhr)
        // 可阻止图片上传
        return {
            prevent: true,
            msg: '需要提示给用户的错误信息'
        }
      },
      // 图片上传并返回了结果，图片插入已成功
      success: function(xhr) {
        console.log('success', xhr)
      },
      // 图片上传并返回了结果，但图片插入时出错了
      fail: function(xhr, editor, resData) {
        console.log('fail', resData)
      },
      // 上传图片出错，一般为 http 请求的错误
      error: function(xhr, editor, resData) {
        console.log('error', xhr, resData)
      },
      // 上传图片超时
      timeout: function(xhr) {
        console.log('timeout', xhr)
      },
      // 图片上传并返回了结果，想要自己把图片插入到编辑器中
      // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
      customInsert: function(insertImgFn, result) {
        // result 即服务端返回的接口
        console.log('customInsert', result)

        // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
        insertImgFn(result.data[0])
      }
    }

    //从别的地方复制过来的文件怎么过滤
    editor.config.pasteFilterStyle = true //不关闭样式过滤。
    editor.config.pasteIgnoreImg = true //来忽略粘贴的图片。如果复制的内容有图片又有文字，则只粘贴文字，不粘贴图片。
    
    //编辑器基本的设置
    editor.config.placeholder = '我们要编辑的内容'
    editor.config.height = 600
    // 取消自动 focus
    editor.config.focus = false
    // 配置全屏功能按钮是否展示
    editor.config.showFullScreen = true

    // 配置 onchange 回调函数，将数据同步到 vue 中
    editor.config.onchange = (newHtml) => {
      // alert(this,newHtml)
      this.editorData = newHtml
      console.log("2222",this,newHtml)
    }
    //失去焦点的回调
    editor.config.onblur = function (newHtml) {
      console.log('onblur', newHtml) // 获取最新的 html 内容
    }
    //获取焦点的回调
    editor.config.onfocus = function (newHtml) {
      console.log('onfocus', newHtml) // 获取最新的 html 内容
    }
    // 插入网络图片的回调
    editor.config.linkImgCallback = function (src) {
      console.log('图片 src ', src)
    }
    // 自定义检查插入视频的回调
    editor.config.onlineVideoCallback = function (video) {
      // 自定义回调内容，内容成功插入后会执行该函数
      console.log('插入视频内容', video)
    }
    // 自定义检查插入的链接
    editor.config.linkCheck = function(text, link) {
      console.log(text, link);
      // 以下情况，请三选一
      // 1. 返回 true ，说明检查通过
      return true
      // // 2. 返回一个字符串，说明检查未通过，编辑器会阻止链接插入。会 alert 出错误信息（即返回的字符串）
      // return '链接有 xxx 错误'
      // 3. 返回 undefined（即没有任何返回），说明检查未通过，编辑器会阻止链接插入。
      // 此处，你可以自定义提示错误信息，自由发挥
    }
    // 自定义检查插入图片的链接
    editor.config.linkImgCheck = function(imgSrc) {
      console.log(imgSrc);
      // 以下情况，请三选一
      // 1. 返回 true ，说明检查通过
      return true
      // // 2. 返回一个字符串，说明检查未通过，编辑器会阻止图片插入。会 alert 出错误信息（即返回的字符串）
      // return '图片 src 有 xxx 错误'
      // 3. 返回 undefined（即没有任何返回），说明检查未通过，编辑器会阻止图片插入。
      // 此处，你可以自定义提示错误信息，自由发挥
    }
    // 自定义检查插入视频的链接
    editor.config.onlineVideoCheck = function(video) {
      console.log(video);
      // 编辑器会根据返回的内容做校验：比如以下几种情况
      // 1. 返回 true ，说明检查通过
      return true
      // 2. 返回一个字符串，说明检查未通过，编辑器会阻止视频插入。会 alert 出错误信息（即返回的字符串）
      // return '插入的视频 有 xxx 错误'
      // 3. 返回 undefined（即没有任何返回），说明检查未通过，编辑器会阻止视频插入。
      // 此处，你可以自定义提示错误信息，自由发挥
    }

    // 创建编辑器
    editor.create()
    //保存editor实例
    this.editor = editor
  },
  methods: {
    getEditorData() {
      // 通过代码获取编辑器内容
      let data = this.editor.txt.html()
      alert(data)
    },
    preEditorData(){
      this.editorData = this.editor.txt.text()
      this.showPreArar = true
    },
    closePreContent(){
      this.showPreArar = false;
    },
    saveDraftData(){
      console.log("保存草稿");
    },
    commitEditorData(){
      console.log("提交内容");
    },
  },
  beforeDestroy() {
    // 调用销毁 API 对当前编辑器实例进行销毁
    this.editor.destroy()
    this.editor = null
  }
}
</script>

<style lang="less">
  .public-home {
    position: relative;
    width: 1200px;
    height: 100%;
    margin: 0 auto;
  
    .edit-content{
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 64px;
      padding: 0 15px;

      .edit-opration{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;

        .btn {
          padding: 0 15px;
          margin: 0 0 0 15px;
          font-weight: 400;
          font-size: 16px;
          height: 40px;
          line-height: 40px;
          white-space: nowrap;
          background-color: #fff;
          cursor: pointer;
        }

        .obtain-content-btn{
          color: #409eff;
          border: 1px solid #409eff;
          border-radius:20px;
        }

        .pre-content-btn{
          color: #e6a23c;
          border: 1px solid #e6a23c;
          border-radius:20px;
        }

        .save-draft-btn{
          color: #ff2f50;
          border: 1px solid #ff2f50;
          border-radius:20px;
        }

        .commit-btn{
          color: #fff;
          border: none;
          border-radius:20px;
          background: linear-gradient(92deg,#ffba40,#ff503e 37%,#ff2f50 81%,#ff1b40);
        }
      }
    }

    //编辑区域的高度
    .editor-area{
      width: 100%;
      height: calc(100% - 64px);
    }

    .w-e-text-container{
      height: calc(100% - 55px) !important;
      margin-bottom: 15px;
    }

    //获取内容的区域
    .get-detail-content{
      width: 100%;
      height: 100%;
    }

    .pre-detail-content{
      position: absolute;
      z-index: 99999;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #fff;

      .pre-top-bar{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 64px;
        padding: 0 0 0 15px;

        a{
          font-size: 24px;
          color: black;
          padding: 0 15px;
        }
      }

      .pre-area{
        width: 100%;
        height: calc(100% - 79px);
        padding: 15px;
        border: 1px solid #eee;
        margin-bottom: 15px;
        overflow-y: auto;
      }
    }
    
  }
</style>
